<template>
  <div class="fixed-top">
    <van-tabs v-model:active="active" router color="#5a9df8" @click-tab="tabChange">
      <van-tab title="拜访" name="visit"></van-tab>
      <van-tab title="商机" name="business"></van-tab>
      <van-tab title="成交" name="businessYcj"></van-tab>
      <!-- <van-tab title="跟进" name="followUp"></van-tab> -->
    </van-tabs>
  </div>
  <visit v-if="active == 'visit'" ref="visit" />
  <business v-else-if="active == 'business'" ref="business" />
  <business-ycj v-else-if="active == 'businessYcj'" ref="businessYcj" />
  <follow-up v-else-if="active == 'followUp'" ref="followUp" />
</template>

<script>
import { useRouter, useRoute } from 'vue-router'
import Visit from './visit.vue'
import Business from './business.vue'
import BusinessYcj from './businessYcj.vue'
import FollowUp from './followUp.vue'
import { reactive, toRefs, onBeforeMount, onActivated } from 'vue'
export default {
  name: 'businessOpportunity',
  components: {
    Visit,
    Business,
    BusinessYcj,
    FollowUp
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      active: 'visit'
    })
    const tabChange = (e) => {
      router.replace({ query: { active: e.name } })
    }

    onBeforeMount(() => {
      const { active } = route.query
      state.active = active
    })
    onActivated(() => {
      const { active } = route.query
      console.log(active)
      if (active) {
        state.active = active
      }
    })

    return {
      ...toRefs(state),
      tabChange
    }
  }
}
</script>
<style lang="less" scoped></style>
